<template>
  <div id="weather">
       <ul>
         <li class="temp">
           <div class="tempp clearfix">
             <div>
               <p>{{temperature}}</p>
               <p>{{weather}}</p>
             </div>
           </div>
           <div class="location">
             <div>{{location}}</div>
             <div>
               <span>{{week}}</span> | <span>{{date}}</span>
             </div>
           </div>
         </li>
         <li class="weather">
           <img :src="weatherImg" alt="图片">
         </li>
         <li class="date">
           <ul>
             <li v-for="(item,index) of allWeather" :key="index">
               <div>{{item.week}}</div>
               <div>
                 <img :src="item.img" alt="图片">
               </div>
               <div>{{item.temperature}}</div>
             </li>
      
           </ul>
         </li>
         <li class="time">{{time}}</li>
       </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'weather',
  data () {
    return {
      date:'',
      time:"00:00:00",
      week:"",
      location:"",
      temperature:"",
      weather:"",
      weatherImg:'',
      allWeather:[],
    }
  },
  created(){
    var _this = this;
    _this.getdate();
    setInterval(_this.getdate,1000);
    this.getWeather();
    this.getAllWeather();
  },
  methods:{
    getAllWeather(){
      var that = this;
      axios.get("index.php?g=api&m=index&a=getweatherfive")
      .then(function(res){
        var data = res.data.content;
        //console.log(res,666666669999)
        that.allWeather = data.slice(2,);
        
      })
    },
    getWeather(){
      var that = this;
      axios.get("index.php?g=api&m=index&a=getweather")
      .then(function(res){
        
        var data = res.data.content;
        //console.log(data,6666666666622222);
        that.week = data.data.week;
        that.location = data.data.citynm;
        that.temperature = data.data.temperature_curr;
        that.weather = data.data.weather_curr;
        that.weatherImg = data.img;
      })
    },
    getdate() {
           var _this = this;
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();
            var hours=0;
            var minutes=0;
            var seconds=0;
            hours=date.getHours();
            minutes=date.getMinutes();
            seconds=date.getSeconds();
            if(month<10) month = "0"+month;
            if(day<10) day = "0"+day;
            if(hours<10) hours = "0"+hours;
            if(minutes<10) minutes = "0"+minutes;
            if(seconds<10) seconds = "0"+seconds;
            _this.time = hours + ":" + minutes + ":" + seconds;
            _this.date = month + "月" + day + "日";
       },
      //  getdate2(value) {
      //     if(value instanceof Date){
      //       var year = value.getFullYear();
      //       var month = value.getMonth()+1;
      //       var day = value.getDate();
      //       if(month<10) month = "0"+month;
      //       if(day<10) day = "0"+day;
      //       var date = year + "/" + month + "/" + day;
      //       console.log(date)
      //       return date;
      //     }else if(typeof(value) == 'string'){
      //       if(value.indexOf("-")!=-1){
      //         var date = value.split(" ")[0];
      //         date = date.split("-");
      //         date = date.join("/")
      //         console.log(date)
      //         return date;
      //       }
      //     }else{
      //       alert("请确定是date对象或字符串日期")
      //     }
      //  }
  },
  // filters:{
  //   changeTimeType(val){
  //     var date = val.split(" ")[0];
  //     date = date.split("-");
  //     date = date.join("/");
  //   }
  // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #weather{
        width:465px;
        height:319px;
        padding:50px 30px 0 30px;
        background-image: url(https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/weather.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    #weather>ul{
      width:100%;
      height:100%;
      display:flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
    }
    #weather .temp{
      width:250px;
      height:150px;
    }
    #weather .temp .tempp>div{
      float:left;
      text-align: center;
      color:#FFF;
    }
    #weather .temp .tempp>div>p:first-child{
      font-size:40px;
      line-height:40px;
    }
    #weather .temp .tempp>div>p:last-child{
      font-size:20px;
      line-height: 30px;
    }
    #weather .temp .location{
      text-align: center;
      font-size:30px;
      color:#FEC44C;
    }
    #weather .temp .location>div:last-child{
      font-size:15px;
    }
    #weather .weather{
      width:150px;
      height:150px;
      display:flex;
      align-items: center;
    }
    #weather .weather img{
      width:100%;
    }
    #weather .date{
      width:250px;
      height:120px;
    }
    #weather .date ul{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    #weather .date ul>li{
      width:36px;
    }
    #weather .date ul>li>div{
      text-align: center;
      font-size:12px;
      color:#FEC44C;
    }
    #weather .date ul>li>div:last-child{
      font-size:10px;
    }
    #weather .date ul>li>div>img{
      width:100%;
      margin:10px 0;
    }
    #weather .time{
      width:120px;
      padding-top:30px;
      margin-left:20px;
      font-size:30px;
      color:white;
    }
    .clearfix:after{
      content: "020"; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;  
    }
</style>